// import { useRef } from 'react'

// function App() {
//   const userInput = useRef();
//   function handleSubmit (e) {
//     e.preventDefault();
//     const username = userInput.current.value;
//     console.log(username);
//   }
//   return (
//     <form onSubmit={handleSubmit}>
//       <input type="text" ref={userInput} />
//       <input type="submit" />
//     </form>
//   )
// }

import { Component } from 'react'

class App extends Component {
  state = { username: '' };
  handleChange(event) {
    this.setState({
      username: event.target.value
    });
  }
  render() {
    return (
      <form>
        <input type="text" value={this.state.username} onChange={this.handleChange.bind(this)}/>
        <span>{this.state.username}</span>
      </form>
    )
  }
}

export default App;
